<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTMLとCSSだけで実装する「しゅわしゅわジュースなボタン」</title>
		<link rel="stylesheet" href="./多汁按钮.css"/>
	</head>
	<body>
		<div class="container">
		  <a href="#" class="glass soda">
		    <div class="waveWrap">
		      <div class="wave">
		        <div class="bubbleWrap">
		          <div class="bubble sz-s sp-1 dl-2"></div>
		          <div class="bubble sz-m sp-3 dl-1"></div>
		          <div class="bubble sz-l sp-2 dl-5"></div>
		          <div class="bubble sz-s sp-2 dl-3"></div>
		          <div class="bubble sz-m sp-3 dl-2"></div>
		          <div class="bubble sz-l sp-1 dl-3"></div>
		          <div class="bubble sz-s sp-2 dl-1"></div>
		          <div class="bubble sz-m sp-1 dl-1"></div>
		          <div class="bubble sz-l sp-3 dl-5"></div>
		          <div class="bubble sz-s sp-1 dl-2"></div>
		          <div class="bubble sz-m sp-3 dl-4"></div>
		          <div class="bubble sz-l sp-2 dl-3"></div>
		          <div class="bubble sz-m sp-1 dl-2"></div>
		          <div class="bubble sz-l sp-3 dl-3"></div>
		          <div class="bubble sz-s sp-1 dl-4"></div>
		          <div class="bubble sz-m sp-2 dl-1"></div>
		          <div class="bubble sz-s sp-1 dl-2"></div>
		          <div class="bubble sz-m sp-3 dl-1"></div>
		          <div class="bubble sz-l sp-2 dl-5"></div>
		          <div class="bubble sz-s sp-2 dl-3"></div>
		          <div class="bubble sz-m sp-3 dl-2"></div>
		          <div class="bubble sz-l sp-1 dl-3"></div>
		          <div class="bubble sz-s sp-2 dl-1"></div>
		          <div class="bubble sz-m sp-1 dl-1"></div>
		          <div class="bubble sz-l sp-3 dl-5"></div>
		          <div class="bubble sz-s sp-1 dl-2"></div>
		          <div class="bubble sz-m sp-3 dl-4"></div>
		          <div class="bubble sz-l sp-2 dl-3"></div>
		          <div class="bubble sz-m sp-1 dl-2"></div>
		          <div class="bubble sz-l sp-3 dl-3"></div>
		          <div class="bubble sz-s sp-1 dl-4"></div>
		          <div class="bubble sz-m sp-2 dl-1"></div>
		          <div class="bubble sz-m sp-1 dl-1"></div>
		          <div class="bubble sz-l sp-3 dl-4"></div>
		          <div class="bubble sz-s sp-1 dl-5"></div>
		          <div class="bubble sz-m sp-2 dl-2"></div>
		        </div>
		      </div>
		    </div>
		    <div class="fruit fruit--lime">
		      <div class="fruit__inner"></div>
		    </div>
		    <div class="iceWrap">
		      <div class="ice ice-1"></div>
		      <div class="ice ice-2"></div>
		      <div class="ice ice-3"></div>
		      <div class="ice ice-4"></div>
		      <div class="ice ice-5"></div>
		      <div class="ice ice-6"></div>
		    </div>
		    <span class="text">ENTRY</span>
		    <div class="reflection"></div>
		  </a>
		
		  <a href="#" class="glass cola">
		    <div class="waveWrap">
		      <div class="wave">
		        <div class="bubbleWrap">
		          <div class="bubble sz-s sp-1 dl-2"></div>
		          <div class="bubble sz-m sp-3 dl-1"></div>
		          <div class="bubble sz-l sp-2 dl-5"></div>
		          <div class="bubble sz-s sp-2 dl-3"></div>
		          <div class="bubble sz-m sp-3 dl-2"></div>
		          <div class="bubble sz-l sp-1 dl-3"></div>
		          <div class="bubble sz-s sp-2 dl-1"></div>
		          <div class="bubble sz-m sp-1 dl-1"></div>
		          <div class="bubble sz-l sp-3 dl-5"></div>
		          <div class="bubble sz-s sp-1 dl-2"></div>
		          <div class="bubble sz-m sp-3 dl-4"></div>
		          <div class="bubble sz-l sp-2 dl-3"></div>
		          <div class="bubble sz-m sp-1 dl-2"></div>
		          <div class="bubble sz-l sp-3 dl-3"></div>
		          <div class="bubble sz-s sp-1 dl-4"></div>
		          <div class="bubble sz-m sp-2 dl-1"></div>
		          <div class="bubble sz-s sp-1 dl-2"></div>
		          <div class="bubble sz-m sp-3 dl-1"></div>
		          <div class="bubble sz-l sp-2 dl-5"></div>
		          <div class="bubble sz-s sp-2 dl-3"></div>
		          <div class="bubble sz-m sp-3 dl-2"></div>
		          <div class="bubble sz-l sp-1 dl-3"></div>
		          <div class="bubble sz-s sp-2 dl-1"></div>
		          <div class="bubble sz-m sp-1 dl-1"></div>
		          <div class="bubble sz-l sp-3 dl-5"></div>
		          <div class="bubble sz-s sp-1 dl-2"></div>
		          <div class="bubble sz-m sp-3 dl-4"></div>
		          <div class="bubble sz-l sp-2 dl-3"></div>
		          <div class="bubble sz-m sp-1 dl-2"></div>
		          <div class="bubble sz-l sp-3 dl-3"></div>
		          <div class="bubble sz-s sp-1 dl-4"></div>
		          <div class="bubble sz-m sp-2 dl-1"></div>
		          <div class="bubble sz-m sp-1 dl-1"></div>
		          <div class="bubble sz-l sp-3 dl-4"></div>
		          <div class="bubble sz-s sp-1 dl-5"></div>
		          <div class="bubble sz-m sp-2 dl-2"></div>
		        </div>
		      </div>
		    </div>
		    <div class="fruit fruit--lemon">
		      <div class="fruit__inner"></div>
		    </div>
		    <div class="iceWrap">
		      <div class="ice ice-1"></div>
		      <div class="ice ice-2"></div>
		      <div class="ice ice-3"></div>
		      <div class="ice ice-4"></div>
		      <div class="ice ice-5"></div>
		      <div class="ice ice-6"></div>
		    </div>
		    <span class="text">ENTRY</span>
		    <div class="reflection"></div>
		  </a>
		</div>
	</body>
</html>